<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8">		
		<title>Sky Mega Menu</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="css/demo.css">
		<link rel="stylesheet" href="css/font-awesome.css">
		<link rel="stylesheet" href="css/sky-mega-menu.css">
		<link rel="stylesheet" href="css/sky-mega-menu-purple.css">
		
		<!--[if lt IE 9]>
			<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
		<!--[if lt IE 10]>
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="js/jquery.placeholder.min.js"></script>
		<![endif]-->
	</head>
	<body class="bg-purple">
		<div class="body">		
			<!-- mega menu -->
			<ul class="sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-icons">				
				<!-- about -->
				<li>
					<a href="#"><i class="fa fa-star"></i>About me</a>
				</li>
				<!--/ about -->
				
				<!-- resume -->
				<li>
					<a href="#_"><i class="fa fa-print"></i>Resume</a>
					<div class="grid-container3">
						<ul>
							<li>
								<a href="#_"><i class="fa fa-tasks"></i>Skills</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#">HTML5</a></li>
										<li><a href="#">CSS3</a></li>
										<li><a href="#">JavaScript</a></li>
										<li><a href="#">jQuery and jQuery UI</a></li>
										<li><a href="#">WordPress</a></li>
										<li><a href="#">Photoshop</a></li>
									</ul>
								</div>
							</li>
							<li><a href="#"><i class="fa fa-briefcase"></i>Education</a></li>
							<li><a href="#"><i class="fa fa-gear"></i>Experience</a></li>
						</ul>
					</div>
				</li>
				<!--/ resume -->
				
				<!-- portfolio -->
				<li>
					<a href="#_"><i class="fa fa-briefcase"></i>Portfolio</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="fa fa-lemon-o"></i>Logos</a></li>
							<li><a href="#"><i class="fa fa-globe"></i>Websites</a></li>
							<li><a href="#"><i class="fa fa-picture-o"></i>Illustrations</a></li>
						</ul>
					</div>
				</li>
				<!--/ portfolio -->
				
				<!-- blog -->
				<li>
					<a href="#"><i class="fa fa-edit"></i>Blog</a>
				</li>
				<!--/ blog -->
				
				<!-- contacts -->
				<li class="right">
					<a href="#_"><i class="fa fa-phone"></i>Contacts</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
							<li><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
							<li><a href="#"><i class="fa fa-google-plus"></i>Google Plus</a></li>
						</ul>
					</div>
				</li>
				<!--/ contacts -->
				
				<!-- drop me a line -->
				<li aria-haspopup="true" class="right">
					<a href="#_"><i class="fa fa-envelope-o"></i>Drop a line</a>
					<div class="grid-container6">
						<form action="#">
							<fieldset>					
								<div class="row">
									<section class="col col-6">
										<label class="input">
											<i class="fa fa-append fa-user"></i>
											<input type="text" placeholder="Name">
										</label>
									</section>
									<section class="col col-6">
										<label class="input">
											<i class="fa fa-append fa-envelope-o"></i>
											<input type="email" placeholder="E-mail">
										</label>
									</section>
								</div>
								
								<section>
									<label class="input">
										<i class="fa fa-append fa-tag"></i>
										<input type="text" placeholder="Subject">
									</label>
								</section>
								
								<section>
									<label class="textarea">
										<i class="fa fa-append fa-comment"></i>
										<textarea rows="4" placeholder="Message"></textarea>
									</label>
								</section>
								
								<button type="submit" class="button">Send message</button>
							</fieldset>						
						</form>
					</div>
				</li>
				<!--/ drop me a line -->
			</ul>
			<!--/ mega menu -->
			
		</div>
	</body>
</html>